<template>
  <el-dialog
    title="邀请分享"
    :modal-append-to-body="false"
    ref="dislogRef"
    :visible.sync="dialogVisible"
    lock-scroll
    width="900px"
  >
    <div slot="title" class="header_title">
      <span class="title_span">邀请分享</span>
    </div>
    <div class="content_div">
      <div class="button_div">
        <el-button
          @click="onButton(index)"
          v-for="(item, index) in buttonData"
          :key="index"
          :type="item.state ? 'primary' : ''"
        >{{ item.name }}</el-button>
      </div>
      <div v-show="buttonData[0].state" class="staff_div">
        <div class="operation">
          <div>
            <div>
              员工手机
              <span>*</span>
            </div>
            <el-input type="text" v-model="queryData.ygsj" style="width:40%;" />
          </div>
          <div>
            <div>员工姓名</div>
            <el-input type="text" v-model="queryData.ygxx" style="width:40%;" />
          </div>
          <div>
            <div>选择权限</div>
            <el-select placeholder v-model="queryData.xzqx" style="width:40%;">
              <el-option
                v-for="item in xzqxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <div class="tips_style">设置权限</div>
          </div>
          <div>
            <div>加入公司</div>
            <el-select placeholder v-model="queryData.jrgs" style="width:40%;">
              <el-option
                v-for="item in jrgsOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="course">
          <div>
            <div class="title">二维码邀请</div>
            <div class="qrview">
              <img src="@/assets/qrcode.jpg" alt style="width:150px;height:150px;" />
            </div>
            <div class="foot">手机扫码分享给好友</div>
          </div>
          <p>或</p>
          <div>
            <div class="title">发送链接邀请</div>
            <div class="url_view">https://www.iconfont.cn/search/index?searchType</div>
            <el-button
              style="background: #20c9ac;margin-bottom: 10px;color: #fff;"
              size="small"
            >复制链接</el-button>
          </div>
          <p>或</p>
          <div>
            <div class="title">短信邀请</div>
            <div class="div_style">
              <div>发送</div>
              <div>短信</div>
            </div>
            <span style="display: block; height: 60px"></span>
          </div>
        </div>
      </div>
      <div v-show="buttonData[1].state" class="customer_div">
        <div class="picture"></div>
        <div class="words">
          <p>分享客户注册使用，即可享受更多优惠政策，分享越多，优惠越大</p>
          <el-button style="background: #20c9ac;color: #fff;" size="small">复制链接</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'BasicInformation',
  computed: {
    ...mapGetters(['name']),
  },
  created () { },
  data () {
    return {
      dialogVisible: false,
      buttonData: [
        {
          name: '邀请员工',
          state: true,
        },
        {
          name: '分享客户',
          state: false,
        },
      ],
      // 选择权限
      xzqxOptions: [
        {
          value: '销售员',
          label: '销售员',
        },
        {
          value: '销售员一',
          label: '销售员一',
        },
      ],
      // 加入公司
      jrgsOptions: [
        {
          value: '郑州象过河软件技术有限公司',
          label: '郑州象过河软件技术有限公司',
        },
        {
          value: '郑州小飞象科技有限公司',
          label: '郑州小飞象科技有限公司',
        },
      ],
      queryData: {
        ygsj: '',
        ygxx: '',
        xzqx: '',
        jrgs: '',
      },
    }
  },
  methods: {
    // 点击切换按钮
    onButton (index) {
      this.buttonData.forEach((item, i) => {
        if (index == i) {
          item.state = true
        } else {
          item.state = false
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.header_title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title_span {
    white-space: nowrap;
    font-size: 0.300019rem;
    color: #666;
    font-weight: 600;
  }
}
.content_div {
  width: 860px;
  height: 530px;
  background: #fff;
  box-sizing: border-box;

  .button_div {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -20px;
  }
  .staff_div {
    width: 100%;
    padding-top: 20px;
    .operation {
      margin: 0 40px;
      > div {
        height: 50px;
        display: flex;
        align-items: center;
        div {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 100%;
          width: 70px;
          span {
            color: #ff0000;
          }
        }
        input {
          width: 300px;
        }
        .tips_style {
          color: #fd6c21;
          margin-left: 0.187512rem;
          font-size: 12px;
        }
      }
    }
    .course {
      // width: 100%;
      height: 221px;
      margin: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div {
        width: 215px;
        height: 100%;
        border: 1px solid #cbced3;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .title {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #666666;
          text-align: center;
          line-height: 20px;
          margin-top: 10px;
        }
        .qrview {
          width: 150px;
          height: 150px;
        }
        .foot {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 22px;
          color: #666666;
        }
        .url_view {
          width: 180px;
          height: 90px;
          background: rgba(240, 242, 245, 0.39);
          border: 1px solid #cbced3;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 17px;
          color: #666666;
          padding: 9px 15px;
        }
      }
    }
  }
  .customer_div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    .picture {
      width: 577px;
      height: 270px;
      background: red;
    }
    .words {
      width: 577px;
      // height: 0.562535rem;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      > p {
        margin: 0;
        font-size: 12px;
        font-family: PingFang SC;
        color: #666;
      }
    }
  }
}
.div_style {
  width: 80px;
  height: 62px;
  margin-top: 30px;
  background: #20c9ac;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 5px;
  > div {
    // margin: 0.093756rem;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px;
  }
}
</style>